<template>
	<view class="change-phone-container page-container">
		<!-- 步骤指示器 -->
		<view class="steps-container">
			<view class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
				<view class="step-number">1</view>
				<text class="step-text">验证当前手机</text>
			</view>
			<view class="step-line" :class="{ active: currentStep > 1 }"></view>
			<view class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
				<view class="step-number">2</view>
				<text class="step-text">绑定新手机</text>
			</view>
			<view class="step-line" :class="{ active: currentStep > 2 }"></view>
			<view class="step-item" :class="{ active: currentStep >= 3 }">
				<view class="step-number">3</view>
				<text class="step-text">完成</text>
			</view>
		</view>

		<!-- 步骤1：验证当前手机号 -->
		<view v-if="currentStep === 1" class="step-content">
			<view class="step-header">
				<text class="step-title">验证当前手机号</text>
				<text class="step-desc">为了您的账户安全，请先验证当前绑定的手机号</text>
			</view>

			<view class="form-section">
				<view class="form-item">
					<text class="form-label">当前手机号</text>
					<text class="current-phone">{{ maskedCurrentPhone }}</text>
				</view>

				<view class="form-item">
					<text class="form-label">验证码</text>
					<view class="verify-code-wrapper">
						<input class="verify-input" v-model="step1Form.verifyCode" placeholder="请输入6位验证码" type="number"
							maxlength="6" />
						<view class="verify-btn" :class="{ disabled: step1Countdown > 0 }" @click="sendStep1Code">
							<text
								class="verify-btn-text">{{ step1Countdown > 0 ? `${step1Countdown}s后重发` : '获取验证码' }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="button-section">
				<view class="submit-btn"
					:class="{ disabled: !step1Form.verifyCode || step1Form.verifyCode.length !== 6 || loading }"
					@click="verifyStep1Phone">
					<text class="submit-btn-text">{{ loading ? '验证中...' : '下一步' }}</text>
				</view>
			</view>
		</view>

		<!-- 步骤2：绑定新手机号 -->
		<view v-if="currentStep === 2" class="step-content">
			<view class="step-header">
				<text class="step-title">绑定新手机号</text>
				<text class="step-desc">请输入您要绑定的新手机号码</text>
			</view>

			<view class="form-section">
				<view class="form-item">
					<text class="form-label">新手机号</text>
					<input class="form-input" v-model="step2Form.newPhone" placeholder="请输入新手机号" type="number"
						maxlength="11" />
				</view>

				<view class="form-item">
					<text class="form-label">验证码</text>
					<view class="verify-code-wrapper">
						<input class="verify-input" v-model="step2Form.verifyCode" placeholder="请输入6位验证码" type="number"
							maxlength="6" />
						<view class="verify-btn"
							:class="{ disabled: step2Countdown > 0 || !isValidPhone(step2Form.newPhone) }"
							@click="sendStep2Code">
							<text
								class="verify-btn-text">{{ step2Countdown > 0 ? `${step2Countdown}s后重发` : '获取验证码' }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="button-section">
				<view class="back-btn" @click="goBack">
					<text class="back-btn-text">上一步</text>
				</view>
				<view class="submit-btn" :class="{ disabled: !canSubmitStep2 || loading }" @click="bindNewPhone">
					<text class="submit-btn-text">{{ loading ? '绑定中...' : '确认绑定' }}</text>
				</view>
			</view>
		</view>

		<!-- 步骤3：完成 -->
		<view v-if="currentStep === 3" class="step-content">
			<view class="success-content">
				<u-icon name="checkmark-circle-fill" size="80" color="#52a58a"></u-icon>
				<text class="success-title">手机号更换成功</text>
				<text class="success-desc">您的手机号已成功更换为：{{ step2Form.newPhone }}</text>

				<view class="button-section">
					<view class="submit-btn" @click="goToProfile">
						<text class="submit-btn-text">返回个人资料</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		validatePhone,
		maskPhone
	} from '@/common/validate.js'

	export default {
		data() {
			return {
				currentStep: 1,
				loading: false,
				step1Countdown: 0,
				step2Countdown: 0,
				currentPhone: '138****8888', // 从用户信息获取
				step1Form: {
					verifyCode: ''
				},
				step2Form: {
					newPhone: '',
					verifyCode: ''
				}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),

			// 脱敏显示当前手机号
			maskedCurrentPhone() {
				return maskPhone(this.currentPhone)
			},
			// 检查步骤2是否可以提交
			canSubmitStep2() {
				return this.isValidPhone(this.step2Form.newPhone) &&
					this.step2Form.verifyCode &&
					this.step2Form.verifyCode.length === 6
			}
		},
		onLoad() {
			this.currentPhone = this.$secret.decryptAES(this.userInfo.mobile)
		},
		methods: {
			// 验证手机号格式
			isValidPhone(phone) {
				return validatePhone(phone)
			},

			// 发送步骤1验证码（验证当前手机）
			async sendStep1Code() {
				if (this.step1Countdown > 0) return

				this.$api.user.GetVerifyCode({
					mobile: this.currentPhone
				}).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})

					this.startCountdown('step1')
				})
			},

			// 发送步骤2验证码（验证新手机）
			async sendStep2Code() {
				if (this.step2Countdown > 0 || !this.isValidPhone(this.step2Form.newPhone)) {
					if (!this.isValidPhone(this.step2Form.newPhone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}
					return
				}

				this.$api.user.GetVerifyCode2({
					mobile: this.step2Form.newPhone
				}).then(res => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})

					this.startCountdown('step2')
				})
			},

			// 开始倒计时
			startCountdown(step) {
				const countdownKey = step === 'step1' ? 'step1Countdown' : 'step2Countdown'
				this[countdownKey] = 60

				const timer = setInterval(() => {
					this[countdownKey]--
					if (this[countdownKey] <= 0) {
						clearInterval(timer)
					}
				}, 1000)
			},

			// 验证当前手机号
			async verifyStep1Phone() {
				if (!this.step1Form.verifyCode || this.step1Form.verifyCode.length !== 6 || this.loading) {
					if (!this.step1Form.verifyCode || this.step1Form.verifyCode.length !== 6) {
						uni.showToast({
							title: '请输入6位验证码',
							icon: 'none'
						})
					}
					return
				}

				this.loading = true
				this.$api.user.VerifyCurrentPhone({
					mobile: this.currentPhone,
					captcha: this.step1Form.verifyCode
				}).then(res => {
					this.loading = false
					this.currentStep = 2
				}).catch(error => {
					this.loading = false
				})
			},

			// 绑定新手机号
			async bindNewPhone() {
				if (!this.canSubmitStep2 || this.loading) {
					return
				}

				this.loading = true
				this.$api.user.updateUserBaseInfo({
					info: {
						mobile: this.step2Form.newPhone
					},
					captcha: this.step2Form.verifyCode
				}).then(res => {
					this.loading = false
					this.userInfo.mobile = this.$secret.encryptAES(this.step2Form.newPhone)
					this.userInfo.mobile_hidden = this.$tools.hidePhoneNumber(this.step2Form.newPhone)
					this.$store.dispatch('updateUserInfo', this.userInfo)
					this.currentStep = 3
				}).catch(error => {
					this.loading = false
				})
			},

			// 返回上一步
			goBack() {
				if (this.currentStep > 1) {
					this.currentStep--
				}
			},

			// 返回个人资料页面
			goToProfile() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-phone-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 步骤指示器 */
	.steps-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 20rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.step-number {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #e5e5e5;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		transition: all 0.3s ease;
	}

	.step-item.active .step-number {
		background-color: #52a58a;
		color: white;
	}

	.step-item.completed .step-number {
		background-color: #52a58a;
		color: white;
	}

	.step-text {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.step-item.active .step-text {
		color: #52a58a;
		font-weight: bold;
	}

	.step-line {
		flex: 1;
		height: 2rpx;
		background-color: #e5e5e5;
		margin: 0 20rpx;
		margin-top: -30rpx;
		transition: all 0.3s ease;
	}

	.step-line.active {
		background-color: #52a58a;
	}

	/* 步骤内容 */
	.step-content {
		background-color: white;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
	}

	.step-header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.step-title {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.step-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 表单样式 */
	.form-section {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.current-phone {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: bold;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.form-input:focus {
		border-color: #52a58a;
	}

	.verify-code-wrapper {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.verify-input {
		flex: 1;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background-color: #fff;
	}

	.verify-input:focus {
		border-color: #52a58a;
	}

	.verify-btn {
		width: 200rpx;
		height: 88rpx;
		background-color: #52a58a;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.verify-btn.disabled {
		background-color: #e5e5e5;
		cursor: not-allowed;
	}

	.verify-btn-text {
		color: white;
		font-size: 26rpx;
	}

	.verify-btn.disabled .verify-btn-text {
		color: #999;
	}

	/* 按钮样式 */
	.button-section {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.back-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 12rpx;
		background-color: #f5f5f5;
		border: 2rpx solid #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.back-btn-text {
		color: #666;
		font-size: 28rpx;
	}

	.submit-btn {
		flex: 2;
		height: 88rpx;
		border-radius: 12rpx;
		background-color: #52a58a;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.submit-btn.disabled {
		background-color: #e5e5e5;
		cursor: not-allowed;
	}

	.submit-btn-text {
		color: white;
		font-size: 28rpx;
		font-weight: 500;
	}

	.submit-btn.disabled .submit-btn-text {
		color: #999;
	}

	/* 成功页面样式 */
	.success-content {
		text-align: center;
		padding: 60rpx 0;
	}

	.success-title {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin: 30rpx 0 20rpx;
	}

	.success-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 60rpx;
	}
</style>